<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-22 17:31:01
-->
<template>
  <div ref="root" style="height:130px">

  </div>
</template>
<script>
  import {
    Radar
  } from "@antv/g2plot"
  export default {
    data() {
      return {

      }
    },
    mounted() {
      this.initCharts();
    },
    methods: {
      initCharts() {
        const data = [{
            name: '舆论',
            star: 10371
          },
          {
            name: '证件',
            star: 7380
          },
          {
            name: '贷款',
            star: 7414
          },
          {
            name: '公证',
            star: 2140
          },
          {
            name: '调解',
            star: 660
          },
          {
            name: '交通',
            star: 885
          },
          {
            name: '党政',
            star: 1626
          },
        ];
        let radarPlot = new Radar(this.$refs['root'], {
          data: data.map((d) => ({
            ...d,
            star: Math.sqrt(d.star)
          })),
          xField: 'name',
          yField: 'star',
          appendPadding: [0, 10, 0, 10],
          meta: {
            star: {
              alias: 'star 数量',
              min: 0,
              nice: true,
              formatter: (v) => Number(v).toFixed(2),
            },
          },
          xAxis: {
            tickLine: null,
          },
          yAxis: {
            label: false,
            grid: {
              alternateColor: 'rgba(0, 0, 0, 0.04)',
            },
          },
          // 开启辅助点
          point: {
            size: 2,
          },
          area: {},
        });
        radarPlot.render();

      }
    }
  }
</script>